<template>
  <!-- 骨架屏 -->
  <PageSkeleton v-if="isLoadingPage"></PageSkeleton>
  <view class="category" v-else>
    <!-- 搜索框 -->
    <view class="search">
      <view class="input">
        <text class="icon-search"
          >&nbsp;&nbsp;女鞋</text
        >
      </view>
    </view>

    <!-- 分类 -->
    <view class="categories">
      <scroll-view scroll-y class="primary">
        <view
          class="item"
          :class="{ active: index == currentIndex }"
          v-for="(item, index) in categoryList"
          :key="item.id"
          @tap="changeTab(index)"
        >
          {{item.name}}
        </view>
      </scroll-view>

      <scroll-view class="secondary" scroll-y>
        <view class="banner-container">
            <!-- 轮播图 -->
        <BasicSwiper
          class="banner"
          :list="swiperList"
        ></BasicSwiper>
        </view>
      

        <!-- 商品分类列表 -->
        <view
          class="panel"
          v-for="item in categoryList[currentIndex]?.children||[]"
          :key="item.id"
        >
          <view class="title">
            <text class="name">{{item.name}}</text>
            <navigator class="more"
              >更多全部</navigator
            >
          </view>

          <view class="section">
            <!-- hover-class="navigator-hover" -->
            <navigator
              v-for="subItem in item.goods"
              :key="subItem.id"
              :url="`/pages/goods/index?id=${subItem.id}`"
              open-type="navigate"
              hover-class="none"
              class="goods"
            >
              <image class="image" :src="subItem.picture">
              </image>

              <view class="name ellipsis-2">
                {{subItem.name}}
              </view>
              <view class="price">
                <text class="symbol">¥</text>
                <text class="number">{{subItem.price}}</text>
              </view>
            </navigator>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>

</template>

<script lang="ts" setup>
import { getHomeBannerHttp } from '@/services/homeService';
import type { BannerItem } from '@/types/home';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue'
import {getCategoryListHttp} from '@/services/categoryService'
import type { CategoryItemType } from '@/types/category';
import PageSkeleton from './components/PageSkeleton.vue';
const swiperList = ref<BannerItem[]>([])


/**
 * 轮播图
 */ 
const getBannerList = async ()=>{
  let res = await getHomeBannerHttp(2)
  console.log('商品分类res：',res);
  swiperList.value = res.result
  
}
/**
 * 商品分类列表
 */ 
const categoryList = ref<CategoryItemType[]>([])
const currentIndex = ref(0)
const getCategoryList = async ()=>{
  
  let res = await getCategoryListHttp()

  console.log('商品分类res:',res);
  categoryList.value = res.result
  
}
const changeTab = (index:number)=>{
  currentIndex.value = index
}


const isLoadingPage = ref(false)
onLoad(async ()=>{
  isLoadingPage.value = true
  await Promise.all([
    getBannerList(),
    getCategoryList()
  ])
  isLoadingPage.value = false
})
</script>

<style lang="scss">
page {
  height: 100%;
}
.category {
  height: 100%;
  display: flex;
  flex-direction: column;
  .search {
    padding: 20rpx 30rpx;
    background-color: #fff;
    .input {
      color: #8b8b8b;
      font-size: 28rpx;
      border-radius: 32rpx;
      background-color: #f3f4f4;
      height: 64rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      padding-left: 26rpx;
    }
  }

  .categories {
    flex: 1;
    overflow: hidden;

    display: flex;
    .primary {
      width: 180rpx;
      min-width: 180rpx;
      background-color: #f6f6f6;

      // flex:none;
      .item {
        height: 96rpx;
        font-size: 26rpx;
        color: #595c63;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        &::after {
          content: '';
          position: absolute;
          left: 42rpx;
          bottom: 0;
          width: 96rpx;
          border-top: 1rpx solid #e3e4e7;
        }
        &.active {
          background-color: #fff;
          &::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 8rpx;
            height: 100%;
            background-color: #27ba9b;
          }
        }
      }
    }
    .secondary {
      background-color: #fff;
      flex:1;
      overflow: hidden;
      .banner-container{
        padding: 0 30rpx;
      }
      .banner {
        width: calc(750rpx - 180rpx);
        height: 200rpx;
        margin: 0 30rpx 20rpx;
        border-radius: 14rpx;
        overflow: hidden;
      }
      .panel {
        margin: 0 30rpx 0rpx;
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .more {
            font-size: 24rpx;
            color: #999;
          }
        }
        .section {
          width: 100%;
          padding: 20rpx 0;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          .goods{
            width: 150rpx;
            margin: 0rpx 20rpx 20rpx 0;

            &:nth-child(3n) {
              margin-right: 0;
            }
            .image{
              width: 150rpx;
              height: 150rpx;
            }

            .name {
              padding: 5rpx;
              font-size: 22rpx;
              color: #333;
            }
            .price {
              padding: 5rpx;
              font-size: 18rpx;
              color: #cf4444;
            }
            .number {
              font-size: 24rpx;
              margin-left: 2rpx;
            }
          }
        }
      }
    }
  }
}
</style>
